UC知道[刚学]CSS的浮动问题
来源：百度知道 编辑：UC知道 时间：2024/05/25 05:10:56
<html>
<head>
<title></title>
<style type="text/css">
#father
{
border: solid 1px #0f0;
}
#father div
{
background-color: #eeb0b0;
margin: 10px;
}
div.special
{
float: left;
}
</style>
</head>
<body>
<div id="father">
<div>
This is a devision!</div>
<div>
This is a devision!</div>
<div class="special">
This is a devision!</div>
<div>
This is a devision!</div>
</div>
<span id="span1">ddddddd</span>
</body>
</html>
为什么显示出来special的DIV不是跟上
<head>
<title></title>
<style type="text/css">
#father
{
border: solid 1px #0f0;
}
#father div
{
background-color: #eeb0b0;
margin: 10px;
}
div.special
{
float: left;
}
</style>
</head>
<body>
<div id="father">
<div>
This is a devision!</div>
<div>
This is a devision!</div>
<div class="special">
This is a devision!</div>
<div>
This is a devision!</div>
</div>
<span id="span1">ddddddd</span>
</body>
</html>
为什么显示出来special的DIV不是跟上
有浮动的，必须清除浮动。加上一个css样式放在公用样式里面。
.clear{clear:both;height:0;font-size:0; overflow:hidden;}
代码如下：
<html>
<head>
<title></title>
<style type="text/css">
#father
{
border: solid 1px #0f0;
}
#father div
{
background-color: #eeb0b0;
margin: 10px;
}
div.special
{
float: left;
}
</style>
</head>
<body>
<div id="father">
<div>
This is a devision!</div>
<div>
This is a devision!</div>
<div class="special">
This is a devision!</div>
<div style="clear:both;height:0;font-size:0; overflow:hidden;"></div><